<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城</title>
    <link rel="stylesheet" href="../css/注册登录.css">
    <script src="../js/jqy.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div
      class="slick-list">
      <img src="../img/1.jpg" />
    </div>

    <div class="biaoti">
      <div class="zhanghao">
        <p class="mi"><img src="../img/mi.jpg" /></p>
        <p class="hao">小米账号</p>
      </div>
      <div class="biaozhu">
        <a href="#">用户协议</a>
        <a href="#">隐私政策</a>
        <a href="#">帮助中心</a>
        <div class="zhong">
          中文(简体)
          <ul class="xiala">
            <li>中文繁体</li>
            <li>English</li>
          </ul>
        </div>
      </div>
    </div>
  <div class="bod">


      <!-- 第一个页面 -->
    <div class="bod2">
      <div class="denglu"  ><span class="sp1"  >登录</span><span class="span2" >注册</span> </div>
      <span><img src="../img/3.jpg"  class="img3" ></span>
      <input type="text" placeholder=" 邮箱/手机号码/小米ID" id="txt"/>
      <input type="password" placeholder="密码"  id="psd"/>
      <input type="checkbox" class="chx1" id="chx1">
      <span class="pan1">已阅读并同意小米账号用户协议和隐私政策</span>
      <button class="btn1"  id="btn1">登录</button>
      <div class="d1" >
      <p class="p1" >忘记密码？</p>
      <p class="p2" >手机号登录</p>
      </div>
      <p class="p3" >其他方式登录</p>
      <a><img src="../img/2.jpg"></a>
    </div>


   <!-- //这是第二个页面 -->
    <div class="bod3">
      <div class="denglu1"><span class="sp11"  >登录</span><span class="sp21" >注册</span> </div>
      <span><img src="../img/3.jpg"  class="img3" ></span>
      <input type="text" value=" 中国"  />
      <input type="text" placeholder="手机号" id="txt2" />
      <input type="text" placeholder="密码"id="psd2">
      <input type="checkbox" class="chx1" id="chx1">
      <span>已阅读并同意小米账号用户协议和隐私政策</span>
      <button class="btn11" id="zc">注册</button>
      <div class="d11" >
      <p class="p11" >收不到验证码？</p>
      <p class="p31" >其他方式登录</p>
      <a><img src="../img/2.jpg" class="zhifubao"></a>
    </div>
  

  </div>

<!-- //底部 -->



    <script>
      $(function(){
        $(".zhong").mouseover(
            function(){
                $(".xiala").show();
            }
        )
        $(".zhong").mouseout(
            function(){
                $(".xiala").hide();
            }
        )
        
        $(".img3").hover(function(){
        if($(this).attr("src")=="../img/3.jpg"){
           $(this).attr("src","../img/4.jpg")}
       
      else{
        $(this).attr("src","../img/3.jpg")}
        
      })

      $(".span2").on("click" ,function(){
        $(".bod2").hide()
        $(".bod3").show()
      })
      $(".sp11").on("click" ,function(){
        $(".bod2").show()
        $(".bod3").hide()
      })
      $(".biaozhu a").mouseover(function(){
        $(this).css("color","#fc5d00")


      })
      $(".biaozhu a").mouseout(function(){
        $(this).css("color","#cecece")
      })
      
      })

      ///注册页面

      let zc=document.getElementById("zc")
      let txt2 =document.getElementById("txt2")
      let psd2=document.getElementById("psd2")
      
      zc.onclick=function(){
        if(txt2.value==''||psd2.value==''){
         
         alert("请注册账号或密码")
       
        }else{
      axios.get(" http://jx.xuzhixiang.top/ap/api/reg.php?",{
      params: {
      username:txt2.value,
      password:psd2.value,
    }
  })
  .then(function (response) {
    console.log(response);
    console.log(response.data.msg)
    if(response.data.msg=="用户名已经存在"){
      alert("该账号已注册")}
    else(alert("账号注册成功"))
  })
  .catch(function (error) {
    console.log(error);
    
  });
}
}



///登陆页面
      let chx1=document.getElementById("chx1")
      let txt=document.getElementById("txt")
      let psd=document.getElementById("psd")
      let btn1=document.getElementById("btn1")
      
     btn1.onclick=function(){
       if(txt.value==''||psd.value==''){
         
        alert("请输入账号或密码")
      
       }else{
         axios.get(" http://jx.xuzhixiang.top/ap/api/login.php?",{
        params: {
       username:txt.value,
       password:psd.value
    }
  })
  .then(function (response) {
    console.log(response);
       if(response.data.msg=="登录成功"){
      console.log(response.data)
      console.log(response.data.data)
      let id=response.data.data.id
      let token=response.data.data.token
      let user=response.data.data.username
      localStorage.setItem("id",id)
      localStorage.setItem("token",token)
      localStorage.setItem("user",user)
      console.log(localStorage.getItem("id"))
      localStorage.setItem("login",true)
      
       alert("登录成功") 
       
      
     window.location.href="小米首页.html"
       



 
    }
    else(alert("请检查用户名或者密码"))
    localStorage.setItem("login",false)
      })
  .catch(function (error) {
    console.log(error);
   
  });}
           
  
 }

    
    </script>
  </body>
</html>
